<template>
  <div class="map">
    <div class="title"><van-icon name="arrow-left"  @click="$router.back()" /><p >地图找房</p></div>
    <baidu-map :center="center.join('')" :zoom="zoom" class="bm-view" ak="oek2hHpa3PhlyQe2WYDz5xtiIexpaeqi" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
      <bm-label v-for="item in cityMap " :key="item.value"
      :content="zoom>=14?`<p>${item.label}${item.count}套</p>`:`<p>${item.label}</p><p>${item.count}套</p>`"
      :position="{lng: item.coord.longitude, lat: item.coord.latitude}"
      :labelStyle="zoom>=14?normalClass:cycleClass" @click="nextCityClick(item)" ></bm-label>
    </baidu-map>
  <!-- 详情弹框区 -->
  <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
    <div class="more"><p>房屋列表</p><p class="moreTitle">更多房源></p></div>
    <div class="houseList">
      <HouseListItem :HouseInfoList="moreHouslist"/>
    </div>
  </van-popup>
  </div>
</template>

<script>
// 引入Api
import { searchMapCityAPI, houseListItemAPI } from '@/api'
import { BaiduMap, BmScale, BmNavigation, BmLabel } from 'vue-baidu-map'
import HouseListItem from '@/components/HouseListItem'
export default {
  name: 'Map',
  components: {
    BaiduMap,
    BmScale,
    BmNavigation,
    BmLabel,
    HouseListItem
  },
  data() {
    return {
      center: [`${localStorage.getItem('city') || '北京'}`],
      // 地方的value
      loalCode: localStorage.getItem('code') || 'AREA|88cff55c-aaa4-e2e0',
      // 地方区域的value
      aeraCode: '',
      // 城市地图列表
      cityMap: [],
      zoom: 10,
      // 圆圈样式
      cycleClass: {
        width: '70px',
        height: '70px',
        border: '2px solid hsla(0,0%,100%,.8)',
        color: '#fff',
        padding: '20px 10px',
        borderRadius: '50%',
        fontSize: '12px',
        background: 'rgba(12,181,106,.9)',
        textAlign: 'center'
      },
      // 正常样式
      normalClass: {
        width: '100px!important',
        height: '25px',
        lineHeight: '25px',
        border: '1px solid hsla(0,0%,100%,.8)',
        padding: '2px 5px!important',
        borderRadius: 'none!important',
        color: '#fff',
        fontSize: '12px',
        background: 'rgba(12,181,106,.9)',
        textAlign: 'center'
      },
      // 弹出层
      show: false,
      // 三级赛选后的城市列表
      moreHouslist: [],
      // 城市区域的值存放起来,避免点击同一个仍然发送请求
      AreaValue: ''
    }
  },
  created() {
    this.getMapHouse(this.loalCode)
  },
  methods: {
    async getMapHouse(value) {
      this.$Toast.loading({ duration: 0, forbidClick: true, message: '加载中...' })
      try {
        const res = await searchMapCityAPI(value)
        this.cityMap = res.data.body
        // console.log(this.cityMap)
        this.$Toast.clear()
      } catch (error) {
        return Promise.reject(error)
      }
    },
    // 地图大小控制事件
    syncCenterAndZoom(e) {
      this.zoom = e.target.getZoom()
      if (this.zoom === 9) {
        this.getMapHouse(this.loalCode)
      }
      if (this.zoom === 13) {
        this.getMapHouse(this.aeraCode)
      }
    },
    // 标签的点击事件
    async nextCityClick(item) {
      // console.log(item)
      if (this.zoom < 14) {
        this.zoom += 2
        this.center.push(item.label)
        this.aeraCode = item.value
        this.getMapHouse(item.value)
      } else {
        this.$Toast.loading({ duration: 0, forbidClick: true, message: '加载中...' })
        /* eslint-disable */
        if (this.AreaValue === item.value) return this.show = true
        /* eslint-enable */
        this.AreaValue = item.value
        const res = await houseListItemAPI({ cityId: item.value })
        this.moreHouslist = res.data.body.list
        this.$Toast.clear()
        this.show = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bm-view {
  width: 375px;
  height: 667px;
}
.title{
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  background-color: #F6F5F6;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #333;
  .van-icon {
    position: absolute;
    top: 13px;
    left: 15px;
    font-size: 16px;
  }
}
.more{
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 15px;
  background-color: #43b978;
  font-size: 20px;
  color: #fff;
  .moreTitle{
      font-size: 14px;
   }
}

</style>
